<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./index.css">
</head>

<body>
<header>
  <!-- 左侧logo -->
  <a href="#" class="logo">Logo</a>
  <!-- 右侧导航 -->
  <ul>
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</header>

<section>
  <img src="./images/stars.png" class="stars" alt="">
  <img src="./images/moon.png" class="moon" alt="">
  <img src="./images/mountains_behind.png" class="behind" alt="">
  <h2 class="txt">Moon Light</h2>
  <a href="#" class="btn">Explore</a>
  <img src="./images/mountains_front.png" class="front" alt="">
</section>
  
  <div class="content">
    <h2>Parallax Scrolling Effects</h2>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Temporibus corporis natus iure necessitatibus nihil ipsam pariatur ullam magnam tempora, consectetur accusantium at odit deleniti, sint consequatur est laudantium voluptate officiis.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Temporibus corporis natus iure necessitatibus nihil ipsam pariatur ullam magnam tempora, consectetur accusantium at odit deleniti, sint consequatur est laudantium voluptate officiis.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Temporibus corporis natus iure necessitatibus nihil ipsam pariatur ullam magnam tempora, consectetur accusantium at odit deleniti, sint consequatur est laudantium voluptate officiis.
      <br><br>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Temporibus corporis natus iure necessitatibus nihil ipsam pariatur ullam magnam tempora, consectetur accusantium at odit deleniti, sint consequatur est laudantium voluptate officiis.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Temporibus corporis natus iure necessitatibus nihil ipsam pariatur ullam magnam tempora, consectetur accusantium at odit deleniti, sint consequatur est laudantium voluptate officiis.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Temporibus corporis natus iure necessitatibus nihil ipsam pariatur ullam magnam tempora, consectetur accusantium at odit deleniti, sint consequatur est laudantium voluptate officiis.
      <br><br>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Temporibus corporis natus iure necessitatibus nihil ipsam pariatur ullam magnam tempora, consectetur accusantium at odit deleniti, sint consequatur est laudantium voluptate officiis.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Temporibus corporis natus iure necessitatibus nihil ipsam pariatur ullam magnam tempora, consectetur accusantium at odit deleniti, sint consequatur est laudantium voluptate officiis.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Temporibus corporis natus iure necessitatibus nihil ipsam pariatur ullam magnam tempora, consectetur accusantium at odit deleniti, sint consequatur est laudantium voluptate officiis.
    </p>
  </div>

  <script>
    // 找对象
    const stars = document.querySelector('.stars')
    const moon = document.querySelector('.moon')
    const behind = document.querySelector('.behind')
    const front = document.querySelector('.front')
    const txt = document.querySelector('.txt')
    const btn = document.querySelector('.btn')
    const header = document.querySelector('header')

    window.addEventListener('scroll', function () {
      let value = window.scrollY
      stars.style.left = value * 0.25 + 'px'
      moon.style.top = value * 1.05 + 'px'
      behind.style.top = value * 0.5 + 'px'
      front.style.top = value * 0 + 'px'
      txt.style.marginRight = value * 4 + 'px'
      txt.style.marginTop = value * 1.5 + 'px'
      btn.style.marginTop = value * 1.5 + 'px'
      header.style.top = value * 0.5 + 'px'
    })


  </script>
</body>

</html>